1import { Button, Navigation, NavigationStack, Script, Text, VStack, ZStack, Image, Path, GlassEffectContainer, HStack } from "scripting"
2
3function View({
4 image
5}: {
6 image: UIImage
7}) {
8 // Access dismiss function.
9 const dismiss = Navigation.useDismiss()
10
11 return <NavigationStack>
12 <VStack
13 navigationTitle="GlassEffect DEMO"
14 navigationBarTitleDisplayMode="inline"
15 toolbar={{
16 topBarLeading: <Button
17 title="Done"
18 action={dismiss}
19 />
20 }}
21 >
22 <ZStack>
23 <Image
24 image={image}
25 resizable
26 scaleToFill
27 />
28 <VStack>
29 <HStack>
30 <Button
31 title="Glass"
32 action={() => { }}
33 buttonStyle="glass"
34 />
35 <Button
36 title="Glass & Tint"
37 action={() => { }}
38 buttonStyle="glass"
39 tint="red"
40 />
41 </HStack>
42 <HStack>
43 <Button
44 title="Glass Prominent"
45 action={() => { }}
46 buttonStyle="glassProminent"
47 />
48 <Button
49 title="Glass Prominent & Tint"
50 action={() => { }}
51 buttonStyle="glassProminent"
52 tint="red"
53 />
54 </HStack>
55 <GlassEffectContainer>
56 <HStack spacing={40}>
57 <Image
58 systemName="1.circle"
59 frame={{ width: 80, height: 80 }}
60 font={36}
61 glassEffect
62 offset={{ x: 30, y: 0 }}
63 />
64 <Image
65 systemName="2.circle"
66 frame={{ width: 80, height: 80 }}
67 font={36}
68 glassEffect
69 offset={{ x: -30, y: 0 }}
70 />
71 </HStack>
72 </GlassEffectContainer>
73 <HStack spacing={12}>
74 <Text
75 padding
76 glassEffect
77 >Foo</Text>
78 <Text
79 padding
80 glassEffect={{
81 type: 'rect',
82 cornerRadius: 10
83 }}
84 >Foo</Text>
85 <Text
86 padding
87 glassEffect={UIGlass.regular().interactive()}
88 >Foo</Text>
89 <Text
90 padding
91 glassEffect={UIGlass.regular().tint("red")}
92 foregroundStyle="white"
93 >Foo</Text>
94 </HStack>
95 </VStack>
96 </ZStack>
97 </VStack>
98 </NavigationStack>
99}
100
101async function run() {
102 try {
103 const image = (await Photos.pickPhotos(1))?.at(0)
104 if (!image) {
105 throw new Error("You must pick an image as the background.")
106 }
107 // Present view.
108 await Navigation.present({
109 element: <View
110 image={image}
111 />
112 })
113 } catch (e) {
114 console.present()
115 console.error(e)
116 }
117
118 // Avoiding memory leaks.
119 Script.exit()
120}
121
122run()
